<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram Recreation</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
<canvas id="physics-canvas" width="450" height="420"></canvas>
<script>
    const canvas = document.getElementById('physics-canvas');
    const ctx = canvas.getContext('2d');

    // Styles
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.fillStyle = 'black';

    // Helper function to draw an arrow
    function drawArrow(ctx, fromx, fromy, tox, toy) {
        const headlen = 10;
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // --- Main Drawing ---

    // 1. Ground Surface
    const y_ground = 300;
    ctx.beginPath();
    ctx.moveTo(20, y_ground);
    ctx.lineTo(430, y_ground);
    ctx.stroke();

    // Hatching for the ground
    ctx.save();
    ctx.lineWidth = 1;
    ctx.beginPath();
    for (let i = 45; i < 430; i += 20) {
        ctx.moveTo(i, y_ground);
        ctx.lineTo(i - 10, y_ground + 15);
    }
    ctx.stroke();
    ctx.restore();

    // 2. Blocks Geometry
    const x_left = 80;
    const x_right = 360;
    const y_top = 180;
    const y_bottom = 300;
    const x_cut_top = 160;
    const x_cut_bottom = 260;

    // Draw the outer rectangle and the inner dividing line
    ctx.beginPath();
    ctx.rect(x_left, y_top, x_right - x_left, y_bottom - y_top);
    ctx.moveTo(x_cut_top, y_top);
    ctx.lineTo(x_cut_bottom, y_bottom);
    ctx.stroke();

    // 3. Force Vector F
    const y_force = y_top + (y_bottom - y_top) / 2;
    drawArrow(ctx, 20, y_force, x_left - 5, y_force);
    
    ctx.font = 'italic 24px "Times New Roman"';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('F', 30, y_force - 18);

    // 4. Angle Arc
    const angle_center_x = x_cut_bottom;
    const angle_center_y = y_bottom;
    const angle_radius = 25;
    const start_angle_rad = Math.PI; // -x direction
    const end_angle_rad = Math.atan2(y_top - y_bottom, x_cut_top - x_cut_bottom);
    ctx.beginPath();
    ctx.arc(angle_center_x, angle_center_y, angle_radius, start_angle_rad, end_angle_rad, true); // counter-clockwise
    ctx.stroke();

    // 5. Labels (1, m1, 2, m2)
    // Label for Block 1 (left)
    const x_label1 = 145;
    const y_label1_num = 215;
    const y_label1_mass = 250;
    ctx.font = '24px "Times New Roman"';
    ctx.fillText('1', x_label1, y_label1_num);
    
    // Draw m₁ with subscript
    ctx.font = 'italic 24px "Times New Roman"';
    const m_width1 = ctx.measureText('m').width;
    ctx.fillText('m', x_label1, y_label1_mass);
    ctx.font = 'italic 18px "Times New Roman"';
    ctx.fillText('1', x_label1 + m_width1 / 1.8, y_label1_mass + 8);
    
    // Label for Block 2 (right)
    const x_label2 = 295;
    const y_label2_num = 215;
    const y_label2_mass = 250;
    ctx.font = '24px "Times New Roman"';
    ctx.fillText('2', x_label2, y_label2_num);

    // Draw m₂ with subscript
    ctx.font = 'italic 24px "Times New Roman"';
    const m_width2 = ctx.measureText('m').width;
    ctx.fillText('m', x_label2, y_label2_mass);
    ctx.font = 'italic 18px "Times New Roman"';
    ctx.fillText('2', x_label2 + m_width2 / 1.8, y_label2_mass + 8);

    // 6. Caption
    ctx.font = '24px "KaiTi", "SimSun"';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';
    ctx.fillText('习题 1-26 图', (x_left + x_right) / 2, y_bottom + 40);
</script>
</body>
</html>